<template>
    <div class="box" @scroll="scrollFun">
        <headers title="我的"></headers>
        <van-tabs :active="active" animated sticky>
            <!-- <van-tab title="全部">
                <van-swipe :autoplay="3000" lazy-render>
                    <van-swipe-item v-for="image in list" :key="image">
                        <img :src="image.image_src" style="width: 100%;" />
                    </van-swipe-item>
                </van-swipe>
            </van-tab> -->

            <van-tab title="全部">
                <searchs></searchs>
                <swipers :list="list"></swipers>
                <!-- nav导航 -->
                <van-grid :border="false" :column-num="4">
                    <van-grid-item v-for="(v, i) in list3" :key="i">
                        <van-image :src="v.image_src" />
                    </van-grid-item>
                </van-grid>
                <!-- 限时秒杀 -->
                <div class="div" style="display: flex;  align-items: center;">
                    <h3 style="margin: 0 5%;">限时秒杀</h3>
                    <van-count-down :time="time" @finish="onFinish">
                        <template #default="timeData">
                            <span class="block">{{ timeData.hours }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.minutes }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.seconds }}</span>
                        </template>
                    </van-count-down>
                </div>
                <div class="list" v-if="hide">
                    <div class="item" v-for="(v,i) in list2" :key="i">
                        <img :src="v.goods_big_logo? 
                        v.goods_big_logo
                        :'https://api-hmugo-web.itheima.net/pyg/banner1.png'
                        " alt="" srcset="">
                        <van-text-ellipsis :content="v.goods_name" />
                    </div>
                </div>
                <div style="width: 100%;height: 2rem; background: red;" v-if="hide"></div>
                <!-- //瀑布流 -->
                <van-pull-refresh v-model="loading" @refresh="onRefresh">
                    <van-grid :border="false" :column-num="2">
                        <van-grid-item v-for="(v, i) in list2" :key="i"
                            :style="1 % 2 == 0 ? 'height:19rem' : 'height:26rem'" @click="toDeatil(v.goods_id)">
                            <!-- <van-image
                                :src="v.goods_small_logo ? v.goods_small_logo : 'https://api-hmugo-web.itheima.net/pyg/banner1.png'" /> -->
                            <lazy-component>
                                <img style="width: 10rem;height: 10rem;"
                                    v-lazy="v.goods_small_logo ? v.goods_small_logo : 'https://api-hmugo-web.itheima.net/pyg/banner1.png'" />
                            </lazy-component>
                            <p>{{ v.goods_name }}</p>
                        </van-grid-item>
                    </van-grid>
                </van-pull-refresh>
            </van-tab>
            <van-tab title="内容">内容1
            </van-tab>
            <van-tab title="更多">内容2</van-tab>
            <van-tab title="其它">内容3</van-tab>
        </van-tabs>
        <van-floating-bubble v-if="isShow" v-model:offset="offset" axis="xy" icon="chat"
            style="width: 90%; background: rgba(225, 0, 225, 0.8);">
            <div class="bottoms">
                <span>登录后可以查看详细</span>
                <span>
                    <router-link to="/login">立即登录</router-link>
                </span>
                <span @click="isShow = false">X</span>
            </div>
        </van-floating-bubble>
    </div>
</template>

<script setup>
import swipers from '@/components/swipers.vue';
import headers from '@/components/headers.vue';
import searchs from '@/components/searchs.vue'
import { showToast } from 'vant';
import { ref } from 'vue'
import { swiperdataApi, searchApi, catitemsApi } from '@/api/api';
//
// 检测页面滚动的方法
const scrollFun = (e) =>{
    console.log(e.target.scrollTop);//滚动条距离顶部的值
    localStorage.setItem('scrollTop',e.target.scrollTop);//只要有变化立马存起来
}
//轮播
const active = ref(0);
let list = ref([])
const swiper = () => {
    swiperdataApi().then((res) => {
        list.value = res.data.message
    })
}
swiper()

//瀑布
let list2 = ref([])
const search = () => {
    searchApi().then((res) => {
        console.log(res)
        list2.value = res.data.message.goods
        //下次进入页面  取出来
        setTimeout(()=>{
            document.querySelector(".box").scrollTop = localStorage.getItem('scrollTop')
            console.log(document.querySelector('.box').scrollTop);
        },100)
    })
}
search()

//nav导航

let list3 = ref([])
const catitems = () => {
    catitemsApi().then((res) => {
        list3.value = res.data.message
    })
}
catitems()

//下拉刷新
const loading = ref(false);
const onRefresh = () => {
    setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        swiper()
        search()
        catitems()
    }, 1000)
}
//跳转详情
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()


const toDeatil = (goods_id) => {
    router.push({ path: "/detail", query: { goods_id: goods_id } })
}
//浮动登录气泡
const offset = ref({ x: 10, y: 500 });
let isShow = ref(true)
//倒计时
let hide = ref(true)
const time = ref(10 * 1000)
const onFinish = () => {
    console.log("123")
    hide.value = false
}

</script>

<style lang="scss" scoped>
.title {
    width: 90%;
    height: 4rem;
}

.box {
    overflow: auto;
}
.colon {
    display: inline-block;
    margin: 0 4px;
    color: #1989fa;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #1989fa;
  }
  .list{
    margin: 0.5rem 0;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    .item{
        text-align: center;
        flex: none;
        width: 30%;
        height: 8rem;
        img{
            width: 4rem;
            height: 4rem;
        }
    }
  }
</style>